<template>
  <u-container-layout>
    <zlrt-table :p="ctx">
      <template #before>
        <zlrt-search :p="ctx"></zlrt-search>
        <div class="tool-bar">
          <el-button type="danger" v-hasPermit="['wms-order:return-in:del']" icon="Delete"
            :disabled="!ctx.selected.length" @click="ctx.batchDelete()">
            批量删除
          </el-button>
          <span style="float:right">
            <el-button type="success" v-hasPermit="['wms-order:return-in:list']" :loading="ctx.exportLoading"
              icon="Download" @click="ctx.export()">
              导出
            </el-button>
            <el-button type="primary" v-hasPermit="['wms-order:return-in:save']" icon="Plus" @click="ctx.showEdit()">
              添加
            </el-button>
          </span>
        </div>
      </template>
      <template #status="scope">
        {{ ctx.other.getStatusName(scope.row.status) }}
      </template>
      <template #createOn="scope">
        {{ ctx.other.formatDt(scope.row.createOn) }}
      </template>
      <template #operation="scope">
        <el-button type="primary" v-hasPermit="['wms-order:return-in:save']" link size="small" icon="Edit"
          @click="ctx.other.detail(scope.row)">
          明细
        </el-button>
        <el-button v-hasPermit="['wms-order:return-in:del']" type="danger" link size="small" icon="Delete"
          @click="ctx.del(scope.row.id)">
          删除
        </el-button>
      </template>
      <template #after>
        <el-dialog v-model="ctx.editVisible" :title="ctx.editAction + ctx.title" width="70%" append-to-body
          :close-on-click-modal="false" @close="ctx.closeEdit()" top="10vh">
          <el-form :ref="(e) => ctx.formRef = e" :model="ctx.editData" :rules="ctx.rules" v-loading="ctx.editLoading"
            label-width="120px" class="demo-ruleForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目" prop="projectId">
                  <el-select style="width: 100%;" v-model="ctx.editData.projectId" placeholder="请选择项目"
                    @change="ctx.other.handleProjectChange">
                    <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="图纸名称" prop="locationName">
                  <el-select style="width: 100%;" v-model="ctx.editData.locationName" placeholder="请选择图纸名称"
                    :disabled="!ctx.editData.projectId" @change="ctx.other.handleRequirementChange">
                    <el-option v-for="item in requirementOptions" :key="item.id" :label="item.blueprintName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="center">物料明细</el-divider>
            <el-button type="primary" v-hasPermit="['wms-order:return-in:save']" size="small" icon="Plus"
              @click="ctx.other.addGoods" :disabled="!ctx.editData.projectId">
              添加
            </el-button>
            <!-- <el-button v-hasPermit="['wms-order:return-in:del']" type="danger" size="small" icon="Delete"
              @click="ctx.other.delGoods" :disabled="!ctx.editData.goodsList">
              批量删除
            </el-button> -->
            <el-table :data="ctx.editData.goodsList" style="width: 100%;margin-top: 10px;">
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column prop="skuName" label="物料名称" width="350">
                <template #default="scope">
                  <el-select v-model="scope.row.skuName" style="width: 300px;" filterable
                    :loading="getGoodsLoading" @change="ctx.other.handleGoodsChange">
                    <el-option v-for="item in goodsOptions" :key="item.id" :label="item.skuName" :value="item.skuName">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="barCode" label="物料编码" width="150">
                <template #default="scope">
                  {{ scope.row.barCode || '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="specification" label="规格型号">
                <template #default="scope">
                  {{ scope.row.specification || '-' }}
                </template>
              </el-table-column>
              <!-- <el-table-column prop="number1" label="单套数量" width="100">
                <template #default="scope">
                  {{ scope.row.number1 || '-' }}
                </template>
              </el-table-column> -->
              <el-table-column prop="number" label="数量" width="100">
                <template #default="scope">
                  <el-input v-model="scope.row.number"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="100">
                <template #default="scope">
                  {{ scope.row.unit || '-' }}
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="ctx.editVisible = false">取消</el-button>
              <el-button type="primary" @click="ctx.other.add()">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </template>
    </zlrt-table>
    <el-dialog v-model="dialogVisible" title="物料明细" width="70%" append-to-body :close-on-click-modal="false">
      <!-- <el-form :model="records" v-loading="ctx.editLoading"
            label-width="120px" class="demo-ruleForm"> -->
      <!-- <el-divider content-position="center">物料明细</el-divider> -->
      <!-- <el-button type="primary" v-hasPermit="['wms-order:return-in:save']" size="small" icon="Plus"
              @click="ctx.other.addGoods" :disabled="!ctx.editData.projectId">
              添加
            </el-button>
            <el-button v-hasPermit="['wms-order:return-in:del']" type="danger" size="small" icon="Delete"
              @click="ctx.other.delGoods" :disabled="!ctx.editData.orderGoodsList">
              批量删除
            </el-button> -->
      <el-table :data="records" style="width: 100%;margin-top: 10px;">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="skuName" label="物料名称" width="350">
          <template #default="scope">
            {{ scope.row.skuName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="barCode" label="物料编码" width="150">
          <template #default="scope">
            {{ scope.row.barCode || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="specification" label="规格型号">
          <template #default="scope">
            {{ scope.row.specification || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="number1" label="单套数量" width="100">
          <template #default="scope">
            {{ scope.row.number1 || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="总数" width="100">
          <template #default="scope">
            {{ scope.row.number || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="100">
          <template #default="scope">
            {{ scope.row.unit || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-form> -->
      <template #footer v-if="ctx.editData.status === '0'">
        <span class="dialog-footer">
          <el-button type="success" @click="ctx.other.finish(ctx.editData)">完成退货</el-button>
        </span>
      </template>
    </el-dialog>
  </u-container-layout>
</template>

<script lang="ts" src="./returnIn" />

<style lang="scss" scoped>

</style>
